import { colorPrimary } from '@/constants';
import { LockOutlined, RedditOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginForm,
  PageContainer,
  ProConfigProvider,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { Helmet, history, useModel } from '@umijs/max';
import Cookies from 'js-cookie';
import { type FC } from 'react';

const Login: FC = () => {
  const { setInitialState } = useModel('@@initialState');
  return (
    <PageContainer>
      <Helmet>
        <title>登录 - umi4-template</title>
      </Helmet>
      <ProConfigProvider hashed={false}>
        <div style={{ backgroundColor: 'white' }}>
          <LoginForm
            logo={<RedditOutlined style={{ fontSize: 44, color: '#6743D5' }} />}
            title="用户登录"
            subTitle="umi4最新版的项目模板"
            initialValues={{
              username: 'admin',
              password: 'ant.design',
              autoLogin: true,
            }}
            onFinish={(values) => {
              Cookies.set('token', Math.random().toString());
              console.log({ values });
              setInitialState((preState) => ({
                ...preState,
                currentUser: {
                  name: values.username,
                },
              }));
              setTimeout(() => {
                history.replace('/cache/home');
              }, 60);
            }}
          >
            <>
              <ProFormText
                name="username"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={'prefixIcon'} />,
                }}
                placeholder={'用户名: admin or user'}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={'prefixIcon'} />,
                }}
                placeholder={'密码: ant.design'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              />
            </>
            <div
              style={{
                marginBlockEnd: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                自动登录
              </ProFormCheckbox>
              <a
                style={{
                  float: 'right',
                  color: colorPrimary,
                }}
              >
                忘记密码
              </a>
            </div>
          </LoginForm>
        </div>
      </ProConfigProvider>
    </PageContainer>
  );
};

export default Login;
